let arr=[
    {x:-64,s:.83,z:1},
    {x:140,s:1,z:2},
    {x:338,s:.83,z:1},
    {x:960,s:.83,z:1},
    {x:960,s:.83,z:1},
    {x:960,s:.83,z:1}
]
function render(){
    let swiperObjs=document.querySelectorAll('.swiper .swiper-slide')
    swiperObjs.forEach((item,i)=>{
        item.style.transform=`translateX(${arr[i].x}px) scale(${arr[i].s})`   // item.style.transform = 'translateX(-64px) scale(0.83)'
        item.style.zIndex=arr[i].z
    })
}
render()
function next(){
    var temp=arr.pop()     //尾部弹
    arr.unshift(temp)      //首部加
    console.log(arr)
    render()               // 3 重新渲染遍历
}
document.querySelector('.swiper .swiper-next').onclick=next

function prev(){
    var temp=arr.shift()   //首弹
    arr.push(temp)         //尾加
    render()
}
document.querySelector('.swiper .swiper-prev').onclick=prev

//点击换图
document.querySelector('.swiper .swiper-wrapper').onclick=function(evt){
    let e=evt || window.event
    let target=e.target || e.srcElement
    if(target.parentNode.style.transform.includes('64px'))  prev()
    if(target.parentNode.style.transform.includes('338px')) next()
}